<template>
  <el-dialog
    :title="config.title"
    :visible.sync="dialogVisible"
    :before-close="handleClose"
    :width="config.width">
    <v-jsoneditor 
      v-model="value" 
      v-loading="loading"
      :options="jsoneditorSetting.options"
      :plus="jsoneditorSetting.plus"
      :height="jsoneditorSetting.height"
      :indentation="jsoneditorSetting.indentation"
      :search="jsoneditorSetting.search"
      :path="jsoneditorSetting.path"
      :color="jsoneditorSetting.color">
    </v-jsoneditor>
  </el-dialog>
</template>

<script>
export default {
  props: {
    config: {
      type: Object,
      default: () => {
        return {
        }
      }
    }
  },
  data() {
    return {
      value: {},
      dialogVisible: false,
      loading: false,
      jsoneditorSetting: {
        options: { mode: 'tree', modes: ['tree', 'code'] },
        plus: false,
        height: '600px',
        indentation: 2,
        search: true,
        color: 'red',
        path: false
      },
    }
  },
  methods: {
    async init(fn,row) {
      this.dialogVisible = true
      this.loading = true
      this.value = await fn(row)
      this.loading = false
    },
    handleClose() {
      Object.assign(this.$data, this.$options.data())
    }
  }
}
</script>

<style scoped>

</style>